<template>
    <div class="rankmain">
        <div class="runh row" :style="{ '--bs-gutter-x': 'var(--my-bs-gutter-x)' }">
            <div v-show="show ? show[0] : true" class="runh2 col">用户名</div>
            <div v-show="show ? show[1] : true" class="runh4 cu" @click="setdesc('count')">全AC题目数
                <el-icon :class="key === 'count' ? 'dian' : ''">
                    <CaretBottom v-show="key === 'count' && desc === false" />
                    <CaretTop v-show="key === 'count' && desc === true" />
                </el-icon>
            </div>
            <div v-show="show ? show[2] : true" class="runh4 cu" @click="
            setdesc('distinctquestionid')">
                评测题目数
                <el-icon :class="key === 'distinctquestionid' ? 'dian' : ''">
                    <CaretBottom v-show="key === 'distinctquestionid' && desc === false" />
                    <CaretTop v-show="key === 'distinctquestionid' && desc === true" />
                </el-icon>
            </div>
            <div v-show="show ? show[3] : true" class="runh4 cu" @click="setdesc('df')">测试点得分率
                <el-icon :class="key === 'df' ? 'dian' : ''">
                    <CaretBottom v-show="key === 'df' && desc === false" />
                    <CaretTop v-show="key === 'df' && desc === true" />
                </el-icon>
            </div>
            <div v-show="show ? show[2] : true" class="runh4 cu" @click="setdesc('练习')">练习积分
                <el-icon :class="key === '练习' ? 'dian' : ''">
                    <CaretBottom v-show="key === '练习' && desc === false" />
                    <CaretTop v-show="key === '练习' && desc === true" />
                </el-icon>
            </div>
            <div v-show="show ? show[2] : true" class="runh4 cu" @click="setdesc('比赛')">比赛积分
                <el-icon :class="key === '比赛' ? 'dian' : ''">
                    <CaretBottom v-show="key === '比赛' && desc === false" />
                    <CaretTop v-show="key === '比赛' && desc === true" />
                </el-icon>
            </div>
            <div v-show="show ? show[2] : true" class="runh4 cu" @click="setdesc('贡献')">贡献积分
                <el-icon :class="key === '贡献' ? 'dian' : ''">
                    <CaretBottom v-show="key === '贡献' && desc === false" />
                    <CaretTop v-show="key === '贡献' && desc === true" />
                </el-icon>
            </div>
        </div>
        <router-link v-for="(d, k ) in teamdata" :key="d.ID" class="runkitem row"
            :style="{ '--bs-gutter-x': 'var(--my-bs-gutter-x)' }" :to="`/user?userid=${d.userid} `">
            <!-- <div class="runh1">
                <strong>#{{ k + 1 }}</strong>
            </div> -->
            <div v-show="show ? show[0] : true" class="runh2 col">

                <img :src="d.headportrait" class="rounded-circle" width="36" />
                <span :style="{ width: '40px', textAlign: 'center', display: 'inline-block' }">
                    <svg :style="{ fontSize: '28px', transform: 'translateY(6px)', }" class="icon" aria-hidden="true"
                        v-if="k < 3">
                        <use :xlink:href="svg[k]" />
                    </svg>
                </span>
                <span :style="{ display: 'inline-flex', width: 'calc(100% - 80px)', overflow: 'hidden', }">{{ d.name
                    }}</span>

            </div>
            <div v-show="show ? show[1] : true" class="runh4">{{ d.ACcount || 0 }}</div>
            <div v-show="show ? show[2] : true" class="runh4">{{ d.distinctquestionid || 0 }}</div>
            <div v-show="show ? show[3] : true" class="runh4">{{ d.df || 0 }}%</div>
            <div v-show="show ? show[2] : true" class="runh4">{{ d.练习 || 0 }}</div>
            <div v-show="show ? show[2] : true" class="runh4">{{ d.比赛 || 0 }}</div>
            <div v-show="show ? show[2] : true" class="runh4">{{ d.贡献 || 0 }}</div>
        </router-link>
    </div>
</template>

<script lang="ts" setup>
import { CaretBottom, CaretTop } from '@element-plus/icons-vue';
import { computed, ref } from 'vue';
import Studycodemodel from '../../mysql_interface/studycodemodel';
const svg = ['#icon-rank_1', '#icon-rank_2', '#icon-rank_3']
const desc = ref(false)

type I_teamdata = {
    ID?: number, name?: string, ACcount?: number, df?: number, headportrait?: string, count?: number, distinctquestionid?: number,
    比赛?: number, 题解贡献?: number, 测试点贡献?: number, 金币?: number, 练习?: number, 贡献?: number
}

const p = defineProps<{ Iteamdata: I_teamdata[], show?: boolean[], border?: boolean, data?: Studycodemodel.Iteam }>()
const key = ref<keyof I_teamdata>('count')
const teamdata = computed(() => {
    return p.Iteamdata.map(z => {
        const { 题解贡献 = 0, 测试点贡献 = 0, ...b } = z
        return {
            ...z,
            贡献: 题解贡献 + 测试点贡献
        }
    }).sort((a, b) => {
        if (desc.value) {
            return Number(a[key.value] || 0) - Number(b[key.value] || 0)
        }
        return Number(b[key.value] || 0) - Number(a[key.value] || 0)
    })
})

function setdesc(_key: keyof I_teamdata) {
    if (_key === key.value) {
        desc.value = !desc.value
    } else {
        key.value = _key
        desc.value = false
    }
}

</script>


<style scoped>
.rankmain {
    box-sizing: border-box;
    --font-size: 14px;
    font-size: var(--font-size);
    --height: 60px;
    width: calc();
}

.dian {
    color: var(--color-cheng);
}

.runh {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 97.92%, rgba(0, 0, 0, 0.87) 100%, rgba(0, 0, 0, 0.3) 100%);
    padding-top: 6px;
    padding-bottom: 6px;
    line-height: 18px;
}

.runh div {
    display: inline-block;
    font-weight: bold;

}

.runh2 {
    overflow: hidden;
}



.runkitem:hover {
    text-decoration: none;
    color: var(--color-cheng);
}

.runh3 {
    /* width: 200px; */
    text-align: center;
}

.runh4 {
    width: 120px;
    text-align: center;
    /* padding-right: 24px; */
}

.runh1 {
    width: 44px;
    text-align: center;
    padding: 0;
    text-align: left;
}


.runkitem {
    border-radius: 4px;
    height: var(--height);
    line-height: var(--height);
    margin-top: 12px;
    text-decoration: none;
    color: var(--color-43);
    overflow: hidden;
}

.text-wrap {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 68px;
    height: 36px;
    display: inline-flex;
}
</style>
